Skip to content

MkImageCompare

Show source on GitHub

Node to show an Image comparison (using a slider).

Example: Regular

Jinja

{{ "https://picsum.photos/700" | MkImageCompare(after_image="https://picsum.photos/701") }}

Python

MkImageCompare('https://picsum.photos/700', 'https://picsum.photos/701')


<img-comparison-slider>
  <img src="https://picsum.photos/700" slot="first">
  <img src="https://picsum.photos/701" slot="second">
</img-comparison-slider>

<p><img-comparison-slider>
  <img src="https://picsum.photos/700" slot="first">
  <img src="https://picsum.photos/701" slot="second">
</img-comparison-slider></p>

Bases: MkTemplate

__init__ 

__init__(before_image: str, after_image: str, **kwargs: Any)

Parameters:

Name Type Description Default
before_image str

Image shown with slider to the right

 required
after_image str

Image shown with slider to the left

 required
kwargs Any

Keyword arguments passed to parent

 {}
Name Children Inherits
MkTemplate
mknodes.templatenodes.mktemplate
Node representing a jinja template.		 
graph TD
  94272697541280["mkimagecompare.MkImageCompare"]
  94272697537520["mktemplate.MkTemplate"]
  94272697822880["mkcontainer.MkContainer"]
  94272697820320["mknode.MkNode"]
  94272697777776["node.Node"]
  139836355973312["builtins.object"]
  94272697537520 --> 94272697541280
  94272697822880 --> 94272697537520
  94272697820320 --> 94272697822880
  94272697777776 --> 94272697820320
  139836355973312 --> 94272697777776
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkimagecompare/metadata.toml
[metadata]
icon = "mdi:image-off"
name = "MkImageCompare"
group = "image"

[[resources.js]]
link = "https://unpkg.com/img-comparison-slider@7/dist/index.js"
defer = true

[[resources.css]]
filename = "https://unpkg.com/img-comparison-slider@7/dist/styles.css"


[examples.regular]
title = "Regular"
jinja = """
{{ "https://picsum.photos/700" | MkImageCompare(after_image="https://picsum.photos/701") }}
"""

[output.html]
template = """
<img-comparison-slider>
  <img src="{{ node.before_image }}" slot="first">
  <img src="{{ node.after_image }}" slot="second">
</img-comparison-slider>
"""
mknodes.basenodes.mkimagecompare.MkImageCompare
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class MkImageCompare(mktemplate.MkTemplate):
    """Node to show an Image comparison (using a slider)."""

    ICON = "material/image-off"
    JS_FILES = [resources.JSFile(JS_URL, defer=True)]
    CSS = [resources.CSSFile(CSS_URL)]

    def __init__(
        self,
        before_image: str,
        after_image: str,
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            before_image: Image shown with slider to the right
            after_image: Image shown with slider to the left
            kwargs: Keyword arguments passed to parent
        """
        super().__init__("output/html/template", **kwargs)
        self.before_image = before_image
        self.after_image = after_image